<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery-3.4.1.min.js"></script>
		<link rel="stylesheet" href="./css/car.css" type="text/css" />
		<link rel="stylesheet" href="./css/base.css" type="text/css" />
		<link rel="stylesheet" href="./css/common.css" type="text/css" />
	</head>
	<body>
		<!-- 头部 -->
		<div class="car-header">
			<div class="w">
				<div class="car-logo">
					<b>我的购物车</b>
				</div>
			</div>
		</div>
		<!-- 商品列表 -->
		<div class="c-container">
			<div class="w">
				<div class="cart-filter-bar">
					<em>全部商品</em>
				</div>
				<!-- 内部商品列表 -->
				<div class="cart-warp">
					<!-- 头部 -->
					<div class="cart-thead">
						<div class="t-checkbox">
							<input type="checkbox" name="" id="" class="checkall" />全选
						</div>
						<div class="t-goods">商品名称</div>
						<div class="t-price">单价</div>
						<div class="t-num">数量</div>
						<div class="t-sum">小计</div>
					</div>
					<!-- 中心内容 -->
					<div class="cart-item-list">
						<div class="cart-item check-cart-item">
							<div class="p-checkbox">
								<input type="checkbox" name="" id="" checked class="j-checkbox" />
							</div>
							<div class="p-goods">
								<div class="p-msg">JQuery框架基础知识</div>
							</div>
							<div class="p-price">¥12.0</div>
							<div class="p-num">
								<div class="quantity-form">
									<a href="javascript:;" class="decrement">-</a>
									<input type="text" class="itxt" value="1" />
									<a href="javascript:;" class="increment">+</a>
								</div>
							</div>
							<div class="p-num">¥12.0</div>
						</div>
						<div class="cart-item">
							<div class="p-checkbox">
								<input type="checkbox" name="" id="" class="j-checkbox" />
							</div>
							<div class="p-goods">
								<div class="p-msg">旅游策略</div>
							</div>
							<div class="p-price">¥15.5</div>
							<div class="p-num">
								<div class="quantity-form">
									<a href="javascript:;" class="decrement">-</a>
									<input type="text" class="itxt" value="1" />
									<a href="javascript:;" class="increment">+</a>
								</div>
							</div>
							<div class="p-num">¥15.5</div>
						</div>
					</div>
					<!-- 底部 -->
					<div class="cart-floatbar">
						<div class="toolbar-right">
							<div class="amount-sum">已经选<em>0</em>件商品</div>
							<div class="price-sum">总价：<em>¥0</em></div>
							<div class="btn-area">结算</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		$(function() {
			// 全选
			$(".checkall").change(function(){
				$(".j-checkbox,checkall").prop("checked",$(this).prop("checked"));
				if($(this).prop("checked")){
					$(".cart-item").addClass("check-cart-item");
				}else{
					$(".cart-item").removeClass("check-cart-item");
				}
			});
			// 点击数量增多时
			$(".increment").click(function() {
				var n = $(this).siblings(".itxt").val();
				n++;
				$(this).siblings(".itxt").val(n);
				var p = $(this).parents(".p-num").siblings(".p-price").html();
				console.log(p);
				p = p.substr(1);
				console.log(p);
				var price = parseFloat(p * n).toFixed(2);
				console.log(price);
				$(this).parents(".p-num").siblings(".p-num").html("¥" + price);
				getSum();
			});
			$(".itxt").change(function(){
				var n=$(this).val();
				var p = $(this).parents(".p-num").siblings(".p-price").html();
				console.log(p);
				p = p.substr(1);
				console.log(p);
				var price = parseFloat(p * n).toFixed(2);
				console.log(price);
				$(this).parents(".p-num").siblings(".p-num").html("¥" + price);
				getSum();
			});
		});
		getSum();
		// 计算合计
		function getSum() {
			var count = 0;
			var money=0;
			$(".itxt").each(function(i, ele) {
				count += parseInt($(ele).val());
			})
			$(".amount-sum em").text(count);
			$(".p-sum").each(function(i,ele){
				money+=parseFloat($(ele).text().substr(1))
			})
			console.log(money)
		}
	</script>
</html>